<template>
  <div class="strut-div">
    <div style="height: 336px;">
      <common-table ref="provinceSourceTable" :config="config"></common-table>
    </div>
    <!-- <div class="item-out-province">
      <el-radio-group v-model="provinceType" size="mini">
        <el-radio-button label="客源省"></el-radio-button>
        <el-radio-button label="客源市"></el-radio-button>
      </el-radio-group>
    </div> -->
  </div>
</template>

<script>
  import CommonTable from '@/components/common/common-table.vue'
  export default {
    components:{
      CommonTable
    },
    data() {
      return {
        nowDate: '',
        _date: '',
        provinceType: "客源省",
        config: {
        	request: {
        		url: "url",
        		params: {

        		}
        	},
        	option: {
				id:"outOfProvince",
        		height: 336,
        		tableColor: '#FBCC13',
        		tableHeader: [{
        			prop: "num",
        			title: "序号",
        		}, {
        			prop: "region",
        			title: "客源省",
        		}, {
        			prop: "money",
        			title: "消费金额",
        		},{
        			prop: "rate",
        			title: "占比 (%)",
        		}],
        		tableData:[]
        	},
        },
      }
    },
    mounted() {
      this.nowDate = new Date().format('yyyy年mm月dd日');
      this._date = new Date().format('yyyy-mm-dd');

      this.getSourceConsumptionDetail();
    },
    methods: {
      getSourceConsumptionDetail() {
        let date = new Date();
        date.setMonth(date.getMonth());
        let lastDay = date.setDate(0);

        let that = this;
        let _url = this.$api.getSourceConsumptionDetail;
        let _param = {
          dataSource: '07',
          objType: '01',
          type: '01',
          // date: new Date(lastDay).format("yyyy-mm-dd"),
          date: '2019-11-30',
          fjnm: '00010001001400090001'
        }

        this.$jquery.ajax({
          type: 'get',
          url:_url,
          dataType: 'json',
          data: _param,
          contentType:'application/x-www-form-urlencoded; charset=UTF-8',
          cache: false,
          success: function (res) {
            if (res.retCode === 200) {
              let data = res.retData;
              let _tableData = data.list.map((v,i) => {
                return Object.assign({num:i+1},v);
              });

              that.config.option.tableData = _tableData;
              that.$refs.provinceSourceTable.initTable();
            }
          }
        })
      }
    },
  }
</script>

<style>
.item-out-province {
  padding: 10px 20px;
  text-align: center;
}
.item-out-province .time {
  font-size: 22px;
  color: #C1D0FF;
}

.item-out-province .el-radio-button--mini .el-radio-button__inner {
  font-size: 18px;
}

.item-out-province .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  /* border-image: linear-gradient(0deg, rgba(2, 159, 216, 1), rgba(31, 213, 189, 1)) 10 10; */
  border-color: rgba(60, 188, 255, 1);
  background:linear-gradient(90deg,rgba(0,191,255,1),rgba(122,186,255,1));
}
.item-out-province .el-radio-button__inner:hover {
  color: rgba(20, 180, 200, 1);
}
.item-out-province .el-radio-button__inner {
  background: rgba(0, 0, 0, 0.01);
  border-color: rgba(60, 188, 255, 1);
  padding: 5px 12px;
  color: #fff;
}
.item-out-province .el-radio-button:first-child .el-radio-button__inner {
  border-radius: 8px 0 0 8px;
}
.item-out-province .el-radio-button:last-child .el-radio-button__inner {
  border-radius: 0 8px 8px 0;
}
</style>
